<template>
  <div
    :style="styles"
    :class="classes"
  >
    <slot />
  </div>
</template>

<script>
  export default {
    name: 'zzofferset',
    props: {
      fullWidth: {
        type: Boolean,
        default: false
      },
      offset: {
        type: [Number, String],
        default: 0
      }
    },

    computed: {
      classes () {
        return {
          'v-offset': true,                   //基本class
          'transition-fast-in-fast-out': true,//动画慢动
          'd-flex': !this.fullWidth,          //是否满宽度
        }
      },
      styles () {
        return {
          top: `-${this.offset}px`,
          // marginBottom: `${this.offset}px`
        }
      }
    }
  }
</script>

<style>
.v-offset {
  position: relative;
  z-index: 1;
}
</style>
